<?php
$res = file_get_contents("http://120.25.126.95:8033/cms/shop/shopMifiCard/getShopMifiCardList.do");
$res = json_decode($res, true);
if (!$res || isset($res['code']) && $res['code'] == "-1") {
    echo json_encode(array('success' => false, 'message' => "网络请求错误"));
    exit;
}
?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="renderer" content="webkit" />
        <title>上海羿尧科技有限公司--随时随地随心随身WIFI</title>
        <link href="css/basic.css" rel="stylesheet" type="text/css" />
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script src="js/jquery-1.11.3.min.js"></script>
    </head>
    <body>
        <iframe frameborder="0" border="0" scrolling="no" width="100%" height="398" src="top.html" mce_src="top.html"></iframe>
        <div class="wrap_w w_cont">
            <div class="menu_l fl">
                <span class="m_logo"><img src="image/m_logo.png" /></span>
                <div class="m_ul">
                    <ul>
                        <li><a class="active" href="card_buy.php">流量卡购买</a></li>
                        <li><a href="index.html">流量充值</a></li>
                        <li><a href="paycheck_record.html">充值记录查询</a></li>
                        <li><a href="surplus_recharge.html">剩余流量查询</a></li>
                        <li><a href="use_info.html">使用详单查询</a></li>
                        <li><a href="help.html">使用帮助</a></li>
                    </ul>
                </div>
            </div>
            <div class="cont_r c_r_back fr">
                <h2>电信流量4G卡购买：</h2>
                <div id="tab1" class="clearfix marginT20">
                    <div class="tab_item card_item">
                        <span class="s_name">卡种选择：</span>
                        <?php foreach ($res['result']['list'] as $k => $v): ?>
                            <a href="javascript:;" class="a_1" remark="<?php echo $v['remark'] ?>" express="<?php echo $v['express']?>" tips="<?php echo $v['title']; ?>" id="<?php echo $v['id']; ?>" price="<?php echo $v['cost_price']; ?>"><?php echo $v['itemName']; ?></a>

                        <?php endforeach; ?>

                        <!--
                        <a href="#" class="a_1 a_active">6GB/年</a>
                        <a href="#" class="a_1">24GB/年</a>
                        <a href="#" class="a_1">300M/季</a> -->
                    </div>
                    <div class="clearfix"></div>
                    <div class="tab_item zhu" id="item-tip"></div>
                    <div class="clearfix"></div>
                    <div class="tab_item card_item clearfix">
                        <span class="s_name fl">数量：</span>
                        <div class="tb_stock fl">
                            <a href="javascript:;" id="num-reduce" class="tb_reduce tb_iconfont tb_disable_reduce">－</a>
                            <input type="text" value="1" id="card-count" />
                            <a href="javascript:;" id="num-plus"class="tb_increase tb_iconfont">＋</a>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="tab_item card_item">
                        <span class="s_name">支付金额：</span>
                        <span class="sum">¥<em id="sum-price">0</em>元</span>
                    </div>
                    <div class="clearfix"></div>
                    <div class="tab_item card_item">
                        <span class="s_name fl marginT10">收货信息：</span>
                        <div class="div_take fl">
                            <ul>
                                <li>
                                    <span class="t_name fl"><font>*</font>收货地区：</span>
                                    <div class="fl">
                                        <select class="select1" id="area-province">
                                            <option value="0">请选择</option>



                                        </select>
                                        <label class="label">*</label>
                                        <select class="select1" id="area-city">
                                            <option value="0">请选择</option>

                                        </select>
                                        <label class="label">*</label>
                                        <select class="select1" id="area-district">

                                            <option value="0">请选择</option>
                                        </select>
                                    </div>
                                </li>
                                <li>
                                    <span class="t_name fl"><font>*</font>收货地址：</span>
                                    <div class="fl">
                                        <input type="text" id="area-address" class="text w_550"  placeholder="请填写收货地址"/>
                                    </div>
                                </li>
                                <li>
                                    <span class="t_name fl"><font>*</font>收货人：</span>
                                    <div class="fl">
                                        <input type="text" id="area-consignee" class="text w_180" placeholder="请填写收货人姓名" />
                                    </div>
                                </li>
                                <li>
                                    <span class="t_name fl"><font>*</font>手机号：</span>
                                    <div class="fl">
                                        <input type="text" id="area-phone" class="text w_180" placeholder="请填写手机号码"/>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="tab_item card_item marginT10">
                        <span class="s_name">配送方式：</span>
                        <span class="color1">快递：<em><font id="card-express">0</font>元</em></span>
                    </div>
                    <div class="clearfix"></div>
                    <div class="tab_item card_item" id="pay-tab">
                        <span class="s_name">支付方式：</span>
                        <a href="javascript:;" class="a_2 a2_active" payWay="1" ><img src="image/icon1.png" width="23" />微信支付</a>
                        <a href="javascript:;" class="a_2" payWay="2" ><img src="image/icon2.jpg" width="20" />支付宝支付</a>
                    </div>
                    <div class="clearfix"></div>
                    <div class="tab_item">
                        <input type="button" class="buy_btn one" value="立即购买"  id="submit-btn"/>
                        <label class="no_info">*请填写具体收货地址</label>
                    </div>
                </div>
            </div>
        </div>
        <iframe frameborder="0" border="0" scrolling="no" width="100%" height="35" src="footer.html" mce_src="footer.html"></iframe>
        <div class="kefu_fix"  id="kefu"><iframe frameborder="0" border="0" scrolling="no" width="195" height="100%" src="kefu.html" mce_src="kefu.html"></iframe>
        <a onclick="javascript: turnoff('kefu')" class="close">关闭</a>
    </div>
    <script>
function turnoff(obj){
document.getElementById(obj).style.display="none";
}
    </script>
        <script src="js/js/city.js"></script>

        <script>
            // var area = {
            //     "1": {name: "广东省", city: {
            //             "2": {name: "深圳市", district: {
            //                     "3": {name: "宝安区"},
            //                     "4": {name: "南山区"}
            //                 }},
            //             "5": {name: "广州市", district: {
            //                     "6": {name: "天河区"}
            //                 }}
            //         }},
            //     "2": {name: "湖北省", city: {
            //             "7": {name: "武汉市", district: {
            //                     "8": {name: "武昌区"}
            //                 }}
            //         }},
            // };
            var area_sort  = [	'22',		'33',		'01',		'23',		'16',		'28',		'30',		'26',		'31',		'09',		'18',		'05',		'20',		'25',		'06',		'19',		'24',
            	'07',		'08',		'17',		'15',		'12',		'10'	,	'11',		'02',		'27',		'34',		'03',		'14',		'32',		'13',		'29',		'21',		'04'];
            for(var i in area_sort){
              console.log(area_sort[i]);
                  $("<option></option>").attr('value', area_sort[i]).text(area[area_sort[i]]['name']).appendTo($('#area-province'));


            }
            $('#area-province').change(function () {
                if ($(this).val() > 0) {
                    var city = area[$(this).val()]['city'];
                    $('#area-city option:gt(0)').remove();
                    for (var i in city) {
                        $("<option></option>").attr('value', i).text(city[i]['name']).attr('pid', $(this).val())
                                .appendTo($('#area-city'));

                    }



                } else {
                    // alert("请选择城市");
                }


            })

            $('#area-city').change(function () {
                if ($(this).val() > 0) {
                    var district = area[$(this).find("option:selected").attr('pid')]['city'][$(this).val()]['district'];

                    $('#area-district option:gt(0)').remove();
                    for (var i in district) {
                        $("<option></option>").attr('value', i).text(district[i]['name'])
                                .appendTo($('#area-district'));

                    }



                } else {
                    // alert("请选择地区");
                }

            })

            //点击事件

            $(".card_item").delegate("a.a_1", "click", function () {
                $('.card_item .a_active').removeClass('a_active');
                $(this).addClass('a_active');
//                            $('#tab-price .sum').text('¥' + $(this).attr('price') + '元');
//                            $('#tab-price .original').text('原价' + $(this).attr('originalPrice') + '元');
                $('#item-tip').text($(this).attr('remark'));
                $('#card-express').text($(this).attr('express'));
                calSumPrice();

            });
             $('#pay-tab a').click(function () {

                            $(this).parent().find('.a2_active').removeClass('a2_active');
                            $(this).addClass('a2_active');
                        })

            $("#num-reduce").click(function () {
                var val = $("#card-count").val();
                if (val > 1) {

                    $("#card-count").val(val - 0 - 1);
                    if (val - 0 - 1 == 1) {
                        $(this).addClass('tb_disable_reduce');
                    }
                }
                calSumPrice();

            })

            $("#num-plus").click(function () {
                $("#card-count").val($("#card-count").val() - 0 + 1);
                if ($("#card-count").val() > 1) {
                    $("#num-reduce").removeClass('tb_disable_reduce');
                }
                calSumPrice();
            });

            function calSumPrice(){
                $('#sum-price').text($('.card_item a.a_active').attr('price')*$("#card-count").val())
            }


            $('#submit-btn').click(function () {
                if ($('.card_item a.a_active').length == 0) {
                    alert("请选择卡种");
                    return;
                }
                if ($('#area-province').val() < 1) {
                    alert("请选择省份");
                    return;
                }
                if ($('#area-city').val() < 1) {
                    alert("请选择城市");
                    return;
                }
                if ($('#area-district').val() < 1) {
                    alert("请选择地区");
                    return;
                }

                if (!$('#area-address').val()) {
                    alert("请填写收货地址");
                    return;
                }
                if (!$('#area-phone').val()) {
                    alert("请填写手机号码");
                    return;
                }
                if (!$('#area-consignee').val()) {
                    alert("请填写收件人");
                    return;
                }


                var bo = {
                    'card-type': $('.card_item a.a_active').attr('id'),
                    'card-count': $('#card-count').val(),
                    'card-price': $('.card_item a.a_active').attr('price'),
                    'card-title': $('.card_item a.a_active').attr('tips'),
                    'card-express': $('.card_item a.a_active').attr('express'),
                    'item-name': $('.card_item a.a_active').text(),
                    'area-province': $('#area-province option:selected').text(),
                    'area-province-id': $('#area-province').val(),
                    'area-city': $('#area-city option:selected').text(),
                    'area-city-id': $('#area-city').val(),
                    'area-district': $('#area-district option:selected').text(),
                    'area-district-id': $('#area-district').val(),
                    'area-address': $('#area-address').val(),
                    'area-consignee': $('#area-consignee').val(),
                    'area-mobile': $('#area-phone').val(),
                    'pay-way': $('#pay-tab .a2_active').attr('payWay')



                }
                $.ajax({
                    url: 'card_buy_save.php',
                    type: 'POST',
                    data: bo,
                    dataType: 'json',
                    cache: false,
                    error: function () {}, //错误执行方法
                    success: function (data) {
                        if(data.success){

                              window.location.href = 'card_order.php';
                        }


                        //console.log(data);
                    } //成功执行方法
                })






            })



        </script>








    </body>
</html>
